<template>
  <div>
<div class="header">
  <span style="letter-spacing:5px;
  background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
  -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
   font-size: 20px ">
    <strong>{{jyjg}}</strong>
  </span>

  <el-row style="width: 100%; height: 95%">
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin-top: 20px; margin-left: 10px"
    >
      <el-form-item>
        <el-select v-model="value" clearable placeholder="省份">
          <el-option
            v-for="item in options0"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="value" clearable placeholder="城市">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="value" clearable placeholder="年份">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="text"
          style="color: black; font-size: 22px"
          @click=""
        >筛选</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</div>
<el-container>
  <el-header style="text-align: center;height:25px;margin: 5px">
            <span style="letter-spacing:5px; background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
             -webkit-background-clip:text;  -webkit-text-fill-color:transparent; font-size: 20px ">
            <strong>锅炉服务单位共计{{this.total}}家</strong>

          </span>
  </el-header>
  <el-main>
    <el-table v-loading="loading" border :data="objects.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              stripe max-height="700" style="width: 100%">
      <el-table-column fixed width="150":index="indexMethod" type="index" prop="id" label="序号" ></el-table-column>
      <el-table-column prop="sydw" label="使用单位">
        <template slot-scope="scope">
          <el-button type="text" style="text-decoration: underline; color: #606266" @click=" showDialog(scope.row.sydw)">
            {{ scope.row.sydw }}
          </el-button>
          <el-dialog :visible.sync="dialogTableVisible">
            <el-table :data="dialogTable" border>
              <el-table-column property="id" :index="indexMethod" type="index" label="序号" fixed ></el-table-column>
              <el-table-column property="sbdjh" label="设备登记号" ></el-table-column>
              <el-table-column property="sblb" label="设备分类"></el-table-column>
              <el-table-column property="xyyl" label="关键参数（压力）"></el-table-column>
              <el-table-column property="jyrq" label="检验日期"></el-table-column>
<!--              <el-table-column property="conclusion" label="检验结论" ></el-table-column>-->
<!--              <el-table-column property="report" label="检验报告"></el-table-column>-->
            </el-table>
          </el-dialog>
        </template>
      </el-table-column>

      <el-table-column prop="glzl" label="锅炉总量"></el-table-column>
      <el-table-column prop="cyzq" label="承压蒸汽锅炉" ></el-table-column>
      <el-table-column prop="cyrs" label="承压热水锅炉" ></el-table-column>
      <el-table-column prop="yjr" label="有机热载体锅炉"></el-table-column>
    </el-table>
  </el-main>
  <el-footer style="display: flex;
    flex-direction: row;
    justify-content: flex-end;">
    <el-pagination
      background
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-footer>


</el-container>

  </div>
</template>

<script>
    import Breadcrumb from "../../BreadCrumb/BreadCrumb";
    import totalTable from '../../../../../assets/totalTable.json'

    export default {
        name: "detail",
      props: {
        jyjg: {
          type: String,
          default: ''
        }
      },
      data(){
          return{
            objects:[],
            sourceData:[],
            filterData:[],
            tableData:[],
            sydwName:[],
            sydwInfo:[],
            guoluNum:[],
            dialogTable:[],
            dialogTableVisible:false,
            naviBasicItems: [{ text: '电站锅炉' }, { text: '检验机构', to: '/guolu/dataCloudService/jyjg' }],
            naviItems: [],
            loading: false,
            total:"",
            currentPage:1,
            pagesize:10,
            options0:[
              {
                value:'选项1',
                label:"江苏"
              },              {
                value:'选项2',
                label:"四川"
              }
            ],
            options1:[
              {
                value:'选项1',
                label:"南京"
              },              {
                value:'选项2',
                label:"成都"
              }
            ],
            options2:[
              {
                value:'选项1',
                label:"2020"
              },              {
                value:'选项2',
                label:"2021"
              }
            ],

          }
      },
      created() {
        (this.naviItems = [...this.naviBasicItems])
        this.getTableData(this.jyjg);
        this.getJsonData();
        this.getGuoluNum();

      },

      components: {
        Breadcrumb,
      },
      methods:{
        showDialog(sydw){
          //console.log(sydw+"'''");
          this.dialogTable=[];
          this.tableData=totalTable;
          for(let i=0;i<this.tableData.length;i++){
            if(this.tableData[i].sydw==sydw){
              this.dialogTable.push(this.tableData[i]);
            }
          }
          this.dialogTableVisible=true;

        },

        async pageSizeChange(pageSize) {
          this.pagesize=pageSize

        },
        // 页数改变
        async pageChange(currentPage) {
          this.currentPage = currentPage

        },
        // switchList() {
        //   this.$emit("switchList");
        // },
        indexMethod(index){
          return (this.currentPage-1)*this.pagesize+index+1
        },
        getTableData(jyjg){
          this.sourceData=totalTable;
          for(let i=0;i<this.sourceData.length;i++) {
            if (this.sourceData[i].jyjg == jyjg) {
              this.filterData.push(this.sourceData[i]);
            }
          }
          //this.total=this.filterData.length

          },
        getJsonData(){
          this.tableData=this.filterData;
          for(let i in this.tableData){
            this.sydwName.push(this.tableData[i].sydw)
          }
          let temp=[];
          for (let j in this.sydwName){
            if(temp.indexOf(this.sydwName[j])==-1){
              temp.push(this.sydwName[j])
            }
          }
         // console.log(temp);
          for(let n in temp){
            for (let m in this.tableData){
              if(temp[n]==this.tableData[m].sydw){
                this.sydwInfo.push(this.tableData[m])
                break;
              }
            }
          }
          this.total=this.sydwInfo.length
        },
        getGuoluNum(){
          this.tableData=totalTable;
          for(let i in this.sydwInfo){
            let object={
              sydw:"",
              glzl:0,
              cyzq:0,
              cyrs:0,
              yjr:0
            }
            object.sydw=this.sydwInfo[i].sydw;
            this.objects.push(object);
          }
          for(let i in this.objects) {

            for (let j in this.tableData) {
              if (this.objects[i].sydw == this.tableData[j].sydw) {
                this.objects[i].glzl += 1;
              }
              if ((this.objects[i].sydw == this.tableData[j].sydw) && this.tableData[j].sblb == "承压蒸汽锅炉") {
                this.objects[i].cyzq += 1;
              }
              if ((this.objects[i].sydw == this.tableData[j].sydw) && this.tableData[j].sblb == "承压热水锅炉") {
                this.objects[i].cyrs += 1;
              }
              if ((this.objects[i].sydw == this.tableData[j].sydw) && this.tableData[j].sblb == "有机热载体锅炉") {
                this.objects[i].yjr += 1;
              }
            }
          }
        },


        },


    }
</script>

<style scoped>

</style>
